<template>
  <div class="model-library-page">
    <div class="page-header">
      <h2>模型库</h2>
      <p>管理和部署AI模型、数字孪生模型和业务模型</p>
      <div class="header-actions" v-if="selectedCategory">
        <a-button type="outline" @click="goBackToCategories">
          <template #icon><icon-arrow-left /></template>
          返回分类列表
        </a-button>
      </div>
    </div>

    <div class="content-container">
      <!-- 模型分类展示 -->
      <div class="model-categories" v-if="!selectedCategory">
        <h2>模型分类</h2>
        <div class="categories-grid">
          <div 
            v-for="category in modelCategories" 
            :key="category.id" 
            class="category-card"
            @click="selectCategory(category)"
          >
            <div class="category-image">
              <img :src="category.image" :alt="category.name" />
              <div class="category-overlay">
                <span class="category-count">{{ category.count }} 个模型</span>
              </div>
            </div>
            <div class="category-content">
              <h3>{{ category.name }}</h3>
              <p>{{ category.description }}</p>
              <div class="category-tags">
                <span v-for="tag in category.tags" :key="tag" class="tag">
                  {{ tag }}
                </span>
              </div>
            </div>
          </div>
        </div>
      </div>

      <!-- 工厂模型列表 -->
      <div class="model-list" v-if="selectedCategory && selectedCategory.id === 1">
        <div class="model-list-header">
          <h2>{{ selectedCategory.name }} - 智慧工厂模型库</h2>
          <p>点击任意模型在右侧三维窗口中查看</p>
          
          <!-- 模型类型选择下拉框 -->
          <div class="model-type-selector">
            <label>模型类型：</label>
            <a-select 
              v-model="selectedFactoryModelType" 
              style="width: 200px"
              @change="handleFactoryModelTypeChange"
            >
              <a-option value="机械模型">机械模型</a-option>
              <a-option value="机器人模型">机器人模型</a-option>
            </a-select>
          </div>
        </div>
        <div class="model-content">
          <div class="model-grid">
            <div 
              v-for="model in currentFactoryModels" 
              :key="model.name"
              class="model-item"
              :class="{ active: selectedModel?.name === model.name }"
              @click="selectModel(model)"
            >
              <div class="model-icon">
                <icon-cube />
              </div>
              <div class="model-info">
                <h4>{{ model.displayName }}</h4>
                <p>{{ model.description }}</p>
                <div class="model-meta">
                  <span class="model-type">FBX文件</span>
                  <span class="model-size">{{ model.size }}</span>
                </div>
              </div>
            </div>
          </div>
          <div class="model-viewer">
            <ThreeJSView 
              ref="threeViewer"
              :model-path="selectedModel?.path"
              :key="selectedModel?.name"
            />
          </div>
        </div>
      </div>

      <!-- 智慧港口模型列表 -->
      <div class="model-list" v-if="selectedCategory && selectedCategory.id === 3">
        <div class="model-list-header">
          <h2>{{ selectedCategory.name }} - 港口模型库</h2>
          <p>点击任意模型在右侧三维窗口中查看</p>
        </div>
        <div class="model-content">
          <div class="model-grid">
            <div 
              v-for="model in portModels" 
              :key="model.name"
              class="model-item"
              :class="{ active: selectedModel?.name === model.name }"
              @click="selectModel(model)"
            >
              <div class="model-icon">
                <icon-cube />
              </div>
              <div class="model-info">
                <h4>{{ model.displayName }}</h4>
                <p>{{ model.description }}</p>
                <div class="model-meta">
                  <span class="model-type">FBX文件</span>
                  <span class="model-size">{{ model.size }}</span>
                </div>
              </div>
            </div>
          </div>
          <div class="model-viewer">
            <ThreeJSView 
              ref="threeViewer"
              :model-path="selectedModel?.path"
              :key="selectedModel?.name"
            />
          </div>
        </div>
      </div>

      <!-- 3D打印模型列表 -->
      <div class="model-list" v-if="selectedCategory && selectedCategory.id === 6">
        <div class="model-list-header">
          <h2>{{ selectedCategory.name }} - 3D打印模型库</h2>
          <p>点击任意模型在右侧三维窗口中查看</p>
        </div>
        <div class="model-content">
          <div class="model-grid">
            <div 
              v-for="model in printingModels" 
              :key="model.name"
              class="model-item"
              :class="{ active: selectedModel?.name === model.name }"
              @click="selectModel(model)"
            >
              <div class="model-icon">
                <icon-cube />
              </div>
              <div class="model-info">
                <h4>{{ model.displayName }}</h4>
                <p>{{ model.description }}</p>
                <div class="model-meta">
                  <span class="model-type">STL文件</span>
                  <span class="model-size">{{ model.size }}</span>
                </div>
              </div>
            </div>
          </div>
          <div class="model-viewer">
            <ThreeJSView 
              ref="threeViewer"
              :model-path="selectedModel?.path"
              :key="selectedModel?.name"
            />
          </div>
        </div>
      </div>

      <!-- 智慧家居模型列表 -->
      <div class="model-list" v-if="selectedCategory && selectedCategory.id === 4">
        <div class="model-list-header">
          <h2>{{ selectedCategory.name }} - 智慧家居模型库</h2>
          <p>点击任意模型在右侧三维窗口中查看</p>
        </div>
        <div class="model-content">
          <div class="model-grid">
            <div 
              v-for="model in homeModels" 
              :key="model.name"
              class="model-item"
              :class="{ active: selectedModel?.name === model.name }"
              @click="selectModel(model)"
            >
              <div class="model-icon">
                <icon-cube />
              </div>
              <div class="model-info">
                <h4>{{ model.displayName }}</h4>
                <p>{{ model.description }}</p>
                <div class="model-meta">
                  <span class="model-type">FBX文件</span>
                  <span class="model-size">{{ model.size }}</span>
                </div>
              </div>
            </div>
          </div>
          <div class="model-viewer">
            <ThreeJSView 
              ref="threeViewer"
              :model-path="selectedModel?.path"
              :key="selectedModel?.name"
            />
          </div>
        </div>
      </div>

      <!-- 智能城市模型列表 -->
      <div class="model-list" v-if="selectedCategory && selectedCategory.id === 2">
        <div class="model-list-header">
          <h2>{{ selectedCategory.name }} - 智能城市模型库</h2>
          <p>点击任意模型在右侧三维窗口中查看</p>
          
          <!-- 模型类型选择下拉框 -->
          <div class="model-type-selector">
            <label>模型类型：</label>
            <a-select 
              v-model="selectedCityModelType" 
              style="width: 200px"
              @change="handleModelTypeChange"
            >
              <a-option value="交通信号灯">交通信号灯</a-option>
              <a-option value="指示牌">指示牌</a-option>
            </a-select>
          </div>
        </div>
        <div class="model-content">
          <div class="model-grid">
            <div 
              v-for="model in currentCityModels" 
              :key="model.name"
              class="model-item"
              :class="{ active: selectedModel?.name === model.name }"
              @click="selectModel(model)"
            >
              <div class="model-icon">
                <icon-cube />
              </div>
              <div class="model-info">
                <h4>{{ model.displayName }}</h4>
                <p>{{ model.description }}</p>
                <div class="model-meta">
                  <span class="model-type">FBX文件</span>
                  <span class="model-size">{{ model.size }}</span>
                </div>
              </div>
            </div>
          </div>
          <div class="model-viewer">
            <ThreeJSView 
              ref="threeViewer"
              :model-path="selectedModel?.path"
              :key="selectedModel?.name"
            />
          </div>
        </div>
      </div>

      <!-- AI生成模型列表 -->
      <div class="model-list" v-if="selectedCategory && selectedCategory.id === 5">
        <div class="model-list-header">
          <h2>{{ selectedCategory.name }} - AI生成模型库</h2>
          <p>点击任意模型在右侧三维窗口中查看</p>
        </div>
        <div class="model-content">
          <div class="model-grid">
            <div 
              v-for="model in aiGeneratedModels" 
              :key="model.name"
              class="model-item"
              :class="{ active: selectedModel?.name === model.name }"
              @click="selectModel(model)"
            >
              <div class="model-icon">
                <icon-cube />
              </div>
              <div class="model-info">
                <h4>{{ model.displayName }}</h4>
                <p>{{ model.description }}</p>
                <div class="model-meta">
                  <span class="model-type">GLB文件</span>
                  <span class="model-size">{{ model.size }}</span>
                </div>
              </div>
            </div>
          </div>
          <div class="model-viewer">
            <ThreeJSView 
              ref="threeViewer"
              :model-path="selectedModel?.path"
              :key="selectedModel?.name"
            />
          </div>
        </div>
      </div>

      <!-- 其他分类的占位符 -->
      <div class="category-placeholder" v-if="selectedCategory && selectedCategory.id !== 1 && selectedCategory.id !== 2 && selectedCategory.id !== 3 && selectedCategory.id !== 4 && selectedCategory.id !== 5 && selectedCategory.id !== 6">
        <div class="placeholder-content">
          <icon-folder />
          <h3>{{ selectedCategory.name }}</h3>
          <p>该分类的模型列表功能正在开发中...</p>
          <a-button type="primary" @click="goBackToCategories">
            返回分类列表
          </a-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref, computed } from 'vue'
import ThreeJSView from '../components/ThreeJSView.vue'

// 响应式状态
const selectedCategory = ref(null)
const selectedModel = ref(null)
const threeViewer = ref(null)

// 模型分类数据
const modelCategories = ref([
  {
    id: 1,
    name: '网络工程及智能制造',
    count: 18, // 机械模型17个 + 机器人模型1个
    description: '涵盖智能生产线、工业4.0、数字孪生工厂等先进制造技术模型',
    image: '/images/机械臂.jpg',
    tags: ['智能制造', '工业4.0', '数字孪生', '自动化']
  },
  {
    id: 2,
    name: '智能城市及智慧交通',
    count: 58,
    description: '包含城市管理、交通优化、环境监测等智慧城市解决方案模型',
    image: '/images/公共汽车.webp',
    tags: ['智慧城市', '交通优化', '环境监测', '城市管理']
  },
  {
    id: 3,
    name: '智慧港口及智能航运',
    count: 0, // 将在初始化时动态计算
    description: '涵盖港口自动化、船舶调度、物流优化等航运智能化模型',
    image: '/images/港口.webp',
    tags: ['智慧港口', '智能航运', '物流优化', '自动化']
  },
  {
    id: 4,
    name: '社会民生及智慧家居',
    count: 23,
    description: '包含智能家居、健康医疗、教育服务等民生领域智能化模型',
    image: '/images/扫地机器人.jpg',
    tags: ['智慧家居', '健康医疗', '教育服务', '民生服务']
  },
  {
    id: 5,
    name: 'AI生成模型库',
    count: 20,
    description: '包含AI自动生成的三维模型、图像生成模型等人工智能创作内容',
    image: '/images/ai.png',
    tags: ['AI生成', '三维模型', '图像生成', '人工智能', '自动创作']
  },
  {
    id: 6,
    name: '其它模型',
    count: 29, // 实际3D打印模型数量
    description: '包含3D打印模型、金融科技、农业科技、能源管理等其他领域的智能化模型',
    image: '/images/无人机.webp',
    tags: ['3D打印', '金融科技', '农业科技', '能源管理', '其他领域']
  }
])

// 工厂模型数据 - 智慧工厂模型
const factoryModels = ref([
  { 
    name: '1.fbx', 
    displayName: '智慧工厂设备1', 
    description: '智慧工厂生产设备1，高精度三维模型', 
    path: '/智慧工厂/1.fbx', 
    size: '8.5MB',
    type: 'FBX文件'
  },
  { 
    name: '2.fbx', 
    displayName: '智慧工厂设备2', 
    description: '智慧工厂生产设备2，高精度三维模型', 
    path: '/智慧工厂/2.fbx', 
    size: '7.8MB',
    type: 'FBX文件'
  },
  { 
    name: '3.fbx', 
    displayName: '智慧工厂设备3', 
    description: '智慧工厂生产设备3，高精度三维模型', 
    path: '/智慧工厂/3.fbx', 
    size: '9.2MB',
    type: 'FBX文件'
  },
  { 
    name: '4.fbx', 
    displayName: '智慧工厂设备4', 
    description: '智慧工厂生产设备4，高精度三维模型', 
    path: '/智慧工厂/4.fbx', 
    size: '6.9MB',
    type: 'FBX文件'
  },
  { 
    name: '5.fbx', 
    displayName: '智慧工厂设备5', 
    description: '智慧工厂生产设备5，高精度三维模型', 
    path: '/智慧工厂/5.fbx', 
    size: '8.1MB',
    type: 'FBX文件'
  },
  { 
    name: '6.fbx', 
    displayName: '智慧工厂设备6', 
    description: '智慧工厂生产设备6，高精度三维模型', 
    path: '/智慧工厂/6.fbx', 
    size: '7.4MB',
    type: 'FBX文件'
  },
  { 
    name: '7.fbx', 
    displayName: '智慧工厂设备7', 
    description: '智慧工厂生产设备7，高精度三维模型', 
    path: '/智慧工厂/7.fbx', 
    size: '8.7MB',
    type: 'FBX文件'
  },
  { 
    name: '8.fbx', 
    displayName: '智慧工厂设备8', 
    description: '智慧工厂生产设备8，高精度三维模型', 
    path: '/智慧工厂/8.fbx', 
    size: '9.6MB',
    type: 'FBX文件'
  },
  { 
    name: '9.fbx', 
    displayName: '智慧工厂设备9', 
    description: '智慧工厂生产设备9，高精度三维模型', 
    path: '/智慧工厂/9.fbx', 
    size: '7.2MB',
    type: 'FBX文件'
  },
  { 
    name: '10.fbx', 
    displayName: '智慧工厂设备10', 
    description: '智慧工厂生产设备10，高精度三维模型', 
    path: '/智慧工厂/10.fbx', 
    size: '8.9MB',
    type: 'FBX文件'
  },
  { 
    name: '11.fbx', 
    displayName: '智慧工厂设备11', 
    description: '智慧工厂生产设备11，高精度三维模型', 
    path: '/智慧工厂/11.fbx', 
    size: '9.3MB',
    type: 'FBX文件'
  },
  { 
    name: '12.fbx', 
    displayName: '智慧工厂设备12', 
    description: '智慧工厂生产设备12，高精度三维模型', 
    path: '/智慧工厂/12.fbx', 
    size: '8.4MB',
    type: 'FBX文件'
  },
  { 
    name: '13.fbx', 
    displayName: '智慧工厂设备13', 
    description: '智慧工厂生产设备13，高精度三维模型', 
    path: '/智慧工厂/13.fbx', 
    size: '7.9MB',
    type: 'FBX文件'
  },
  { 
    name: '14.fbx', 
    displayName: '智慧工厂设备14', 
    description: '智慧工厂生产设备14，高精度三维模型', 
    path: '/智慧工厂/14.fbx', 
    size: '9.1MB',
    type: 'FBX文件'
  },
  { 
    name: '15.fbx', 
    displayName: '智慧工厂设备15', 
    description: '智慧工厂生产设备15，高精度三维模型', 
    path: '/智慧工厂/15.fbx', 
    size: '8.6MB',
    type: 'FBX文件'
  },
  { 
    name: '16.fbx', 
    displayName: '智慧工厂设备16', 
    description: '智慧工厂生产设备16，高精度三维模型', 
    path: '/智慧工厂/16.fbx', 
    size: '9.5MB',
    type: 'FBX文件'
  },
  { 
    name: '17.fbx', 
    displayName: '智慧工厂设备17', 
    description: '智慧工厂生产设备17，高精度三维模型', 
    path: '/智慧工厂/17.fbx', 
    size: '8.8MB',
    type: 'FBX文件'
  }
])

// 港口模型数据 - 动态生成
const portModels = ref([])

// 动态生成港口模型列表
const generatePortModels = () => {
  const modelFiles = [
    '1.fbx', '2.fbx', '3.fbx', '4.fbx', '5.fbx', '6.fbx', '7.fbx', '8.fbx', '9.fbx', '10.fbx',
    '11.fbx', '22.fbx', '23.fbx', '24.fbx', '25.fbx', '26.fbx', '27.fbx', '28.fbx', '29.fbx', '31.fbx',
    '32.fbx', '33.fbx', '34.fbx', '35.fbx', '36.fbx', '37.fbx', '38.fbx', '39.fbx', '40.fbx', '41.fbx',
    '42.fbx', '43.fbx', '44.fbx', '45.fbx', '46.fbx', '47.fbx', '48.fbx', '49.fbx', '50.fbx', '51.fbx',
    '52.fbx', '53.fbx', '54.fbx', '55.fbx', '56.fbx', '57.fbx', '58.fbx', '59.fbx', '60.fbx'
  ]
  
  return modelFiles.map((filename, index) => {
    const modelNumber = filename.replace('.fbx', '')
    return {
      name: filename,
      displayName: `港口设备${modelNumber}`,
      description: `港口设备模型${modelNumber}，用于港口作业和物流管理`,
      path: `/港口模型/${filename}`,
      size: `${(Math.random() * 5 + 5).toFixed(1)}MB` // 随机生成5-10MB的文件大小
    }
  })
}

// 智慧家居模型数据
const homeModels = ref([
  { name: 'Apt_Furniture_01.fbx', displayName: '公寓家具套装1', description: '现代公寓家具组合，包含沙发、茶几等', path: '/家具/Apt_Furniture_01.fbx', size: '4.2MB' },
  { name: 'Apt_Furniture_02.fbx', displayName: '公寓家具套装2', description: '现代公寓家具组合，包含餐桌、椅子等', path: '/家具/Apt_Furniture_02.fbx', size: '3.8MB' },
  { name: 'Apt_Kit_01.fbx', displayName: '公寓厨房套装1', description: '现代厨房设备组合，包含橱柜、电器等', path: '/家具/Apt_Kit_01.fbx', size: '5.1MB' },
  { name: 'Apt_Kit_02.fbx', displayName: '公寓厨房套装2', description: '现代厨房设备组合，包含岛台、收纳等', path: '/家具/Apt_Kit_02.fbx', size: '4.9MB' },
  { name: 'Apt_Props_01.fbx', displayName: '公寓装饰品1', description: '现代家居装饰品，包含摆件、植物等', path: '/家具/Apt_Props_01.fbx', size: '2.3MB' },
  { name: 'Apt_Props_02.fbx', displayName: '公寓装饰品2', description: '现代家居装饰品，包含艺术品、摆设等', path: '/家具/Apt_Props_02.fbx', size: '2.1MB' },
  { name: 'Apt_Rail.fbx', displayName: '公寓栏杆', description: '现代公寓阳台栏杆设计', path: '/家具/Apt_Rail.fbx', size: '1.8MB' },
  { name: 'Bathroom_Apt_01.fbx', displayName: '公寓浴室套装1', description: '现代浴室设备组合，包含洗手台、镜子等', path: '/家具/Bathroom_Apt_01.fbx', size: '3.5MB' },
  { name: 'Bathroom_apt_02.fbx', displayName: '公寓浴室套装2', description: '现代浴室设备组合，包含淋浴房、马桶等', path: '/家具/Bathroom_apt_02.fbx', size: '3.7MB' },
  { name: 'Bathroom_Corner_Tiles.fbx', displayName: '浴室转角瓷砖', description: '浴室转角瓷砖装饰设计', path: '/家具/Bathroom_Corner_Tiles.fbx', size: '1.2MB' },
  { name: 'Canvas_nat_01-04.fbx', displayName: '自然画作1-4', description: '自然主题装饰画作组合', path: '/家具/Canvas_nat_01-04.fbx', size: '2.8MB' },
  { name: 'Canvas_nat_05-08.fbx', displayName: '自然画作5-8', description: '自然主题装饰画作组合', path: '/家具/Canvas_nat_05-08.fbx', size: '2.6MB' },
  { name: 'Corner Wall Cabinet.fbx', displayName: '转角壁柜', description: '现代转角壁柜，节省空间设计', path: '/家具/Corner Wall Cabinet.fbx', size: '2.9MB' },
  { name: 'Kitchen_01.fbx', displayName: '厨房设备1', description: '现代厨房设备，包含灶台、油烟机等', path: '/家具/Kitchen_01.fbx', size: '4.3MB' },
  { name: 'Lamp 02.fbx', displayName: '现代台灯2', description: '现代简约台灯设计', path: '/家具/Lamp 02.fbx', size: '1.5MB' },
  { name: 'lamp.fbx', displayName: '现代台灯', description: '现代简约台灯，适合书房客厅', path: '/家具/lamp.fbx', size: '1.3MB' },
  { name: 'Modern Liquor Cabinet.fbx', displayName: '现代酒柜', description: '现代风格酒柜，带LED灯效', path: '/家具/Modern Liquor Cabinet.fbx', size: '3.4MB' },
  { name: 'Modular Wall Cabinet.fbx', displayName: '模块化壁柜', description: '可组合的模块化壁柜系统', path: '/家具/Modular Wall Cabinet.fbx', size: '3.2MB' },
  { name: 'Painting.fbx', displayName: '装饰画', description: '现代艺术装饰画作', path: '/家具/Painting.fbx', size: '1.8MB' },
  { name: 'Vase.fbx', displayName: '装饰花瓶', description: '现代简约装饰花瓶', path: '/家具/Vase.fbx', size: '1.1MB' },
  { name: 'wine bottle 04_LP.fbx', displayName: '酒瓶4', description: '精美酒瓶模型，低多边形版本', path: '/家具/wine bottle 04_LP.fbx', size: '0.8MB' },
  { name: 'wine thin glass W Liquid.fbx', displayName: '红酒杯(含酒)', description: '装有红酒的高脚杯', path: '/家具/wine thin glass W Liquid.fbx', size: '1.2MB' },
  { name: 'wine thin glass.fbx', displayName: '红酒杯', description: '精美的红酒高脚杯', path: '/家具/wine thin glass.fbx', size: '1.0MB' }
])

// 智慧城市模型数据
const smartCityModels = ref({
  '交通信号灯': [
    { name: '1.fbx', displayName: '交通信号灯1', description: '标准三色交通信号灯', path: '/智慧城市/交通信号灯/1.fbx', size: '2.1MB' },
    { name: '2.fbx', displayName: '交通信号灯2', description: 'LED交通信号灯', path: '/智慧城市/交通信号灯/2.fbx', size: '2.3MB' },
    { name: '3.fbx', displayName: '交通信号灯3', description: '智能交通信号灯', path: '/智慧城市/交通信号灯/3.fbx', size: '2.5MB' },
    { name: '4.fbx', displayName: '交通信号灯4', description: '太阳能交通信号灯', path: '/智慧城市/交通信号灯/4.fbx', size: '2.2MB' },
    { name: '5.fbx', displayName: '交通信号灯5', description: '倒计时交通信号灯', path: '/智慧城市/交通信号灯/5.fbx', size: '2.4MB' },
    { name: '6.fbx', displayName: '交通信号灯6', description: '箭头型交通信号灯', path: '/智慧城市/交通信号灯/6.fbx', size: '2.0MB' },
    { name: '7.fbx', displayName: '交通信号灯7', description: '人行道信号灯', path: '/智慧城市/交通信号灯/7.fbx', size: '1.9MB' },
    { name: '8.fbx', displayName: '交通信号灯8', description: '自行车道信号灯', path: '/智慧城市/交通信号灯/8.fbx', size: '2.1MB' },
    { name: '9.fbx', displayName: '交通信号灯9', description: '多方向信号灯', path: '/智慧城市/交通信号灯/9.fbx', size: '2.6MB' },
    { name: '10.fbx', displayName: '交通信号灯10', description: '智能感应信号灯', path: '/智慧城市/交通信号灯/10.fbx', size: '2.3MB' },
    { name: '11.fbx', displayName: '交通信号灯11', description: '高杆信号灯', path: '/智慧城市/交通信号灯/11.fbx', size: '2.7MB' },
    { name: '12.fbx', displayName: '交通信号灯12', description: '悬臂式信号灯', path: '/智慧城市/交通信号灯/12.fbx', size: '2.4MB' },
    { name: '13.fbx', displayName: '交通信号灯13', description: '立柱式信号灯', path: '/智慧城市/交通信号灯/13.fbx', size: '2.2MB' },
    { name: '14.fbx', displayName: '交通信号灯14', description: '双面信号灯', path: '/智慧城市/交通信号灯/14.fbx', size: '2.5MB' },
    { name: '15.fbx', displayName: '交通信号灯15', description: '四面信号灯', path: '/智慧城市/交通信号灯/15.fbx', size: '2.8MB' },
    { name: '16.fbx', displayName: '交通信号灯16', description: '临时信号灯', path: '/智慧城市/交通信号灯/16.fbx', size: '1.8MB' },
    { name: '17.fbx', displayName: '交通信号灯17', description: '移动式信号灯', path: '/智慧城市/交通信号灯/17.fbx', size: '2.0MB' },
    { name: '18.fbx', displayName: '交通信号灯18', description: '工地信号灯', path: '/智慧城市/交通信号灯/18.fbx', size: '2.1MB' },
    { name: '19.fbx', displayName: '交通信号灯19', description: '学校区域信号灯', path: '/智慧城市/交通信号灯/19.fbx', size: '2.3MB' },
    { name: '20.fbx', displayName: '交通信号灯20', description: '医院区域信号灯', path: '/智慧城市/交通信号灯/20.fbx', size: '2.2MB' },
    { name: '21.fbx', displayName: '交通信号灯21', description: '商业区信号灯', path: '/智慧城市/交通信号灯/21.fbx', size: '2.4MB' },
    { name: '22.fbx', displayName: '交通信号灯22', description: '住宅区信号灯', path: '/智慧城市/交通信号灯/22.fbx', size: '2.1MB' },
    { name: '23.fbx', displayName: '交通信号灯23', description: '工业区信号灯', path: '/智慧城市/交通信号灯/23.fbx', size: '2.5MB' },
    { name: '24.fbx', displayName: '交通信号灯24', description: '高速公路信号灯', path: '/智慧城市/交通信号灯/24.fbx', size: '2.6MB' },
    { name: '25.fbx', displayName: '交通信号灯25', description: '隧道信号灯', path: '/智慧城市/交通信号灯/25.fbx', size: '2.3MB' },
    { name: '26.fbx', displayName: '交通信号灯26', description: '桥梁信号灯', path: '/智慧城市/交通信号灯/26.fbx', size: '2.4MB' }
  ],
  '指示牌': [
    { name: '27.fbx', displayName: '指示牌1', description: '方向指示牌', path: '/智慧城市/指示牌/27.fbx', size: '1.8MB' },
    { name: '28.fbx', displayName: '指示牌2', description: '距离指示牌', path: '/智慧城市/指示牌/28.fbx', size: '1.9MB' },
    { name: '29.fbx', displayName: '指示牌3', description: '限速指示牌', path: '/智慧城市/指示牌/29.fbx', size: '1.7MB' },
    { name: '30.fbx', displayName: '指示牌4', description: '停车指示牌', path: '/智慧城市/指示牌/30.fbx', size: '1.6MB' },
    { name: '31.fbx', displayName: '指示牌5', description: '禁行指示牌', path: '/智慧城市/指示牌/31.fbx', size: '1.8MB' },
    { name: '32.fbx', displayName: '指示牌6', description: '单行道指示牌', path: '/智慧城市/指示牌/32.fbx', size: '1.7MB' },
    { name: '33.fbx', displayName: '指示牌7', description: '人行横道指示牌', path: '/智慧城市/指示牌/33.fbx', size: '1.9MB' },
    { name: '34.fbx', displayName: '指示牌8', description: '学校区域指示牌', path: '/智慧城市/指示牌/34.fbx', size: '2.0MB' },
    { name: '35.fbx', displayName: '指示牌9', description: '医院指示牌', path: '/智慧城市/指示牌/35.fbx', size: '1.8MB' },
    { name: '36.fbx', displayName: '指示牌10', description: '加油站指示牌', path: '/智慧城市/指示牌/36.fbx', size: '1.9MB' },
    { name: '37.fbx', displayName: '指示牌11', description: '停车场指示牌', path: '/智慧城市/指示牌/37.fbx', size: '2.1MB' },
    { name: '38.fbx', displayName: '指示牌12', description: '收费站指示牌', path: '/智慧城市/指示牌/38.fbx', size: '2.0MB' },
    { name: '39.fbx', displayName: '指示牌13', description: '服务区指示牌', path: '/智慧城市/指示牌/39.fbx', size: '1.9MB' },
    { name: '40.fbx', displayName: '指示牌14', description: '出入口指示牌', path: '/智慧城市/指示牌/40.fbx', size: '1.8MB' },
    { name: '41.fbx', displayName: '指示牌15', description: '匝道指示牌', path: '/智慧城市/指示牌/41.fbx', size: '2.0MB' },
    { name: '42.fbx', displayName: '指示牌16', description: '桥梁指示牌', path: '/智慧城市/指示牌/42.fbx', size: '1.9MB' },
    { name: '43.fbx', displayName: '指示牌17', description: '隧道指示牌', path: '/智慧城市/指示牌/43.fbx', size: '2.1MB' },
    { name: '44.fbx', displayName: '指示牌18', description: '景区指示牌', path: '/智慧城市/指示牌/44.fbx', size: '2.2MB' },
    { name: '45.fbx', displayName: '指示牌19', description: '商业区指示牌', path: '/智慧城市/指示牌/45.fbx', size: '2.0MB' },
    { name: '46.fbx', displayName: '指示牌20', description: '工业区指示牌', path: '/智慧城市/指示牌/46.fbx', size: '1.9MB' },
    { name: '47.fbx', displayName: '指示牌21', description: '住宅区指示牌', path: '/智慧城市/指示牌/47.fbx', size: '1.8MB' },
    { name: '48.fbx', displayName: '指示牌22', description: '机场指示牌', path: '/智慧城市/指示牌/48.fbx', size: '2.1MB' },
    { name: '49.fbx', displayName: '指示牌23', description: '火车站指示牌', path: '/智慧城市/指示牌/49.fbx', size: '2.0MB' },
    { name: '50.fbx', displayName: '指示牌24', description: '地铁站指示牌', path: '/智慧城市/指示牌/50.fbx', size: '1.9MB' },
    { name: '51.fbx', displayName: '指示牌25', description: '公交站指示牌', path: '/智慧城市/指示牌/51.fbx', size: '1.8MB' },
    { name: '52.fbx', displayName: '指示牌26', description: '出租车指示牌', path: '/智慧城市/指示牌/52.fbx', size: '1.7MB' },
    { name: '53.fbx', displayName: '指示牌27', description: '共享单车指示牌', path: '/智慧城市/指示牌/53.fbx', size: '1.8MB' },
    { name: '54.fbx', displayName: '指示牌28', description: '充电桩指示牌', path: '/智慧城市/指示牌/54.fbx', size: '1.9MB' },
    { name: '55.fbx', displayName: '指示牌29', description: '紧急电话指示牌', path: '/智慧城市/指示牌/55.fbx', size: '1.6MB' },
    { name: '56.fbx', displayName: '指示牌30', description: '监控区域指示牌', path: '/智慧城市/指示牌/56.fbx', size: '1.7MB' },
    { name: '57.fbx', displayName: '指示牌31', description: '环保区域指示牌', path: '/智慧城市/指示牌/57.fbx', size: '1.8MB' },
    { name: '58.fbx', displayName: '指示牌32', description: '智能交通指示牌', path: '/智慧城市/指示牌/58.fbx', size: '2.0MB' }
  ]
})

// 当前选择的智慧城市模型类型
const selectedCityModelType = ref('交通信号灯')

// 获取当前选择类型的模型列表
const currentCityModels = computed(() => {
  return smartCityModels.value[selectedCityModelType.value] || []
})

// 工厂模型分类数据
const selectedFactoryModelType = ref('机械模型')

// 机械模型数据
const mechanicalModels = ref([
  { name: '1.fbx', displayName: '机械设备1', description: '精密机械设备模型', path: '/智慧工厂/机械模型/1.fbx', size: '8.5MB', type: 'FBX文件' },
  { name: '2.fbx', displayName: '机械设备2', description: '工业机械设备模型', path: '/智慧工厂/机械模型/2.fbx', size: '7.8MB', type: 'FBX文件' },
  { name: '3.fbx', displayName: '机械设备3', description: '自动化机械设备', path: '/智慧工厂/机械模型/3.fbx', size: '9.2MB', type: 'FBX文件' },
  { name: '4.fbx', displayName: '机械设备4', description: '生产线机械设备', path: '/智慧工厂/机械模型/4.fbx', size: '6.9MB', type: 'FBX文件' },
  { name: '5.fbx', displayName: '机械设备5', description: '智能制造设备', path: '/智慧工厂/机械模型/5.fbx', size: '8.1MB', type: 'FBX文件' },
  { name: '6.fbx', displayName: '机械设备6', description: '数控机械设备', path: '/智慧工厂/机械模型/6.fbx', size: '7.3MB', type: 'FBX文件' },
  { name: '7.fbx', displayName: '机械设备7', description: '装配线设备', path: '/智慧工厂/机械模型/7.fbx', size: '8.7MB', type: 'FBX文件' },
  { name: '8.fbx', displayName: '机械设备8', description: '检测设备模型', path: '/智慧工厂/机械模型/8.fbx', size: '6.5MB', type: 'FBX文件' },
  { name: '9.fbx', displayName: '机械设备9', description: '包装机械设备', path: '/智慧工厂/机械模型/9.fbx', size: '7.9MB', type: 'FBX文件' },
  { name: '10.fbx', displayName: '机械设备10', description: '输送带系统', path: '/智慧工厂/机械模型/10.fbx', size: '5.4MB', type: 'FBX文件' },
  { name: '11.fbx', displayName: '机械设备11', description: '焊接设备模型', path: '/智慧工厂/机械模型/11.fbx', size: '8.3MB', type: 'FBX文件' },
  { name: '12.fbx', displayName: '机械设备12', description: '切割设备模型', path: '/智慧工厂/机械模型/12.fbx', size: '7.1MB', type: 'FBX文件' },
  { name: '13.fbx', displayName: '机械设备13', description: '抛光设备模型', path: '/智慧工厂/机械模型/13.fbx', size: '6.8MB', type: 'FBX文件' },
  { name: '14.fbx', displayName: '机械设备14', description: '喷涂设备模型', path: '/智慧工厂/机械模型/14.fbx', size: '7.6MB', type: 'FBX文件' },
  { name: '15.fbx', displayName: '机械设备15', description: '热处理设备', path: '/智慧工厂/机械模型/15.fbx', size: '8.9MB', type: 'FBX文件' },
  { name: '16.fbx', displayName: '机械设备16', description: '质量检测设备', path: '/智慧工厂/机械模型/16.fbx', size: '5.7MB', type: 'FBX文件' },
  { name: '17.fbx', displayName: '机械设备17', description: '物料处理设备', path: '/智慧工厂/机械模型/17.fbx', size: '6.2MB', type: 'FBX文件' }
])

// 机器人模型数据
const robotModels = ref([
  { name: '1.fbx', displayName: '工业机器人1', description: '六轴工业机器人模型', path: '/智慧工厂/机器人/1.fbx', size: '4.2MB', type: 'FBX文件' }
])

// 获取当前选择类型的工厂模型列表
const currentFactoryModels = computed(() => {
  if (selectedFactoryModelType.value === '机械模型') {
    return mechanicalModels.value
  } else if (selectedFactoryModelType.value === '机器人模型') {
    return robotModels.value
  }
  return []
})

// AI生成模型数据
const aiGeneratedModels = ref([
  { name: '公交车.glb', displayName: 'AI生成公交车', description: 'AI自动生成的公交车三维模型，高质量渲染效果', path: '/3D生成模型库/公交车.glb', size: '4.2MB' },
  { name: '钟表.glb', displayName: 'AI生成钟表', description: 'AI自动生成的精美钟表模型，细节丰富', path: '/3D生成模型库/钟表.glb', size: '3.1MB' },
  { name: '1352631794146861056_1756387078_8d0208c9-3591-44db-9f98-e136324ddcd1_0.glb', displayName: 'AI生成模型001', description: 'AI智能生成的三维模型，独特设计风格', path: '/3D生成模型库/1352631794146861056_1756387078_8d0208c9-3591-44db-9f98-e136324ddcd1_0.glb', size: '5.8MB' },
  { name: '1352632878106009600_1756387395_4587aace-0414-434c-b1d0-66df3fcc5c43_0.glb', displayName: 'AI生成模型002', description: 'AI智能生成的三维模型，创新造型设计', path: '/3D生成模型库/1352632878106009600_1756387395_4587aace-0414-434c-b1d0-66df3fcc5c43_0.glb', size: '6.2MB' },
  { name: '1352801316011106304_1756427486_5007c32c-f2ac-4bc2-b366-756b12af5ed0_0.glb', displayName: 'AI生成模型003', description: 'AI智能生成的三维模型，精细建模工艺', path: '/3D生成模型库/1352801316011106304_1756427486_5007c32c-f2ac-4bc2-b366-756b12af5ed0_0.glb', size: '4.9MB' },
  { name: '1352805162385006592_1756428421_74d197c8-015f-48cd-8c4c-b4cfa71265df_0.glb', displayName: 'AI生成模型004', description: 'AI智能生成的三维模型，现代艺术风格', path: '/3D生成模型库/1352805162385006592_1756428421_74d197c8-015f-48cd-8c4c-b4cfa71265df_0.glb', size: '5.1MB' },
  { name: '1352885442948939776_1756447591_ec3135fd-36eb-465a-aaec-3ad5252f99c5_0.glb', displayName: 'AI生成模型005', description: 'AI智能生成的三维模型，科技感十足', path: '/3D生成模型库/1352885442948939776_1756447591_ec3135fd-36eb-465a-aaec-3ad5252f99c5_0.glb', size: '4.7MB' },
  { name: '1352886285169451008_1756447753_3f4fb11b-1222-421c-8e5d-712c417ee40c_0.glb', displayName: 'AI生成模型006', description: 'AI智能生成的三维模型，未来主义设计', path: '/3D生成模型库/1352886285169451008_1756447753_3f4fb11b-1222-421c-8e5d-712c417ee40c_0.glb', size: '5.3MB' },
  { name: '1352887789674610688_1756448106_0c38edce-9ef1-4da7-b176-4685e7e5b049_0.glb', displayName: 'AI生成模型007', description: 'AI智能生成的三维模型，抽象艺术风格', path: '/3D生成模型库/1352887789674610688_1756448106_0c38edce-9ef1-4da7-b176-4685e7e5b049_0.glb', size: '4.6MB' },
  { name: '1352959811389800448_1756465268_9c88814f-18a9-4659-9040-f7d80d6ebb59_0.glb', displayName: 'AI生成模型008', description: 'AI智能生成的三维模型，创意无限', path: '/3D生成模型库/1352959811389800448_1756465268_9c88814f-18a9-4659-9040-f7d80d6ebb59_0.glb', size: '5.9MB' },
  { name: '1353254876741943296_1756535639_d7a6aa19-8de0-4259-ba03-8952d2bf55d5_0.glb', displayName: 'AI生成模型009', description: 'AI智能生成的三维模型，几何美学设计', path: '/3D生成模型库/1353254876741943296_1756535639_d7a6aa19-8de0-4259-ba03-8952d2bf55d5_0.glb', size: '4.8MB' },
  { name: '1353261950997749760_1756537316_2092458d-972d-4d18-9218-23d3c549a50f_0.glb', displayName: 'AI生成模型010', description: 'AI智能生成的三维模型，工业设计美学', path: '/3D生成模型库/1353261950997749760_1756537316_2092458d-972d-4d18-9218-23d3c549a50f_0.glb', size: '5.4MB' },
  { name: '1353262609822171136_1756537467_6a67169b-49d4-4921-9e7d-de86970b65b3_0.glb', displayName: 'AI生成模型011', description: 'AI智能生成的三维模型，生物仿生设计', path: '/3D生成模型库/1353262609822171136_1756537467_6a67169b-49d4-4921-9e7d-de86970b65b3_0.glb', size: '4.3MB' },
  { name: '1353266391415046144_1756538374_2aa9e216-5da8-433e-be5a-b4939d106e18_0.glb', displayName: 'AI生成模型012', description: 'AI智能生成的三维模型，极简主义风格', path: '/3D生成模型库/1353266391415046144_1756538374_2aa9e216-5da8-433e-be5a-b4939d106e18_0.glb', size: '3.9MB' },
  { name: '1353267049568452608_1756538528_c83a25e5-76f2-4a52-aa02-415cec16580a_0.glb', displayName: 'AI生成模型013', description: 'AI智能生成的三维模型，复古经典设计', path: '/3D生成模型库/1353267049568452608_1756538528_c83a25e5-76f2-4a52-aa02-415cec16580a_0.glb', size: '5.7MB' },
  { name: '1353268182575865856_1756538786_fbdc1a29-ba9d-4e73-aca4-79f121aac24b_0.glb', displayName: 'AI生成模型014', description: 'AI智能生成的三维模型，有机形态设计', path: '/3D生成模型库/1353268182575865856_1756538786_fbdc1a29-ba9d-4e73-aca4-79f121aac24b_0.glb', size: '6.1MB' },
  { name: '1353270100404592640_1756539259_3de88645-94aa-4976-b426-7998ab2cd869_0.glb', displayName: 'AI生成模型015', description: 'AI智能生成的三维模型，机械结构美学', path: '/3D生成模型库/1353270100404592640_1756539259_3de88645-94aa-4976-b426-7998ab2cd869_0.glb', size: '4.5MB' },
  { name: '1353271924498939904_1756539706_38041feb-b22d-40ea-92e4-ed60126e60b0_0.glb', displayName: 'AI生成模型016', description: 'AI智能生成的三维模型，装饰艺术风格', path: '/3D生成模型库/1353271924498939904_1756539706_38041feb-b22d-40ea-92e4-ed60126e60b0_0.glb', size: '5.2MB' },
  { name: '1353273955813023744_1756540191_dbcd453a-1413-4a31-91d9-a517e478333f_0.glb', displayName: 'AI生成模型017', description: 'AI智能生成的三维模型，概念设计作品', path: '/3D生成模型库/1353273955813023744_1756540191_dbcd453a-1413-4a31-91d9-a517e478333f_0.glb', size: '4.4MB' },
  { name: '1353536065520320512_1756602681_90720775-5095-4972-b0cb-1cf564415511_0.glb', displayName: 'AI生成模型018', description: 'AI智能生成的三维模型，参数化设计', path: '/3D生成模型库/1353536065520320512_1756602681_90720775-5095-4972-b0cb-1cf564415511_0.glb', size: '5.6MB' },
  { name: '1353558315573231616_1756607974_6d5a5006-ace5-437c-8737-4c3b975cd62f_0.glb', displayName: 'AI生成模型019', description: 'AI智能生成的三维模型，流体力学造型', path: '/3D生成模型库/1353558315573231616_1756607974_6d5a5006-ace5-437c-8737-4c3b975cd62f_0.glb', size: '5.0MB' },
  { name: '1353653853618487296_1756630851_25c16ce2-6d69-4f68-812d-80e84bf49561_0.glb', displayName: 'AI生成模型020', description: 'AI智能生成的三维模型，数字艺术作品', path: '/3D生成模型库/1353653853618487296_1756630851_25c16ce2-6d69-4f68-812d-80e84bf49561_0.glb', size: '4.1MB' }
])

// 3D打印模型数据
const printingModels = ref([
  { name: 'AGV小车2.stl', displayName: 'AGV小车2', description: '自动导引运输车，用于智能工厂物料运输', path: '/3D打印模型库/AGV小车2.stl', size: '2.3MB' },
  { name: 'sound_box.stl', displayName: '音响设备', description: '工业级音响设备模型', path: '/3D打印模型库/sound_box.stl', size: '1.8MB' },
  { name: '冲压机.stl', displayName: '冲压机', description: '金属成型冲压设备', path: '/3D打印模型库/冲压机.stl', size: '4.2MB' },
  { name: '叉车.stl', displayName: '叉车', description: '仓储物流叉车设备', path: '/3D打印模型库/叉车.stl', size: '3.1MB' },
  { name: '叉车new.stl', displayName: '叉车(新版)', description: '升级版仓储物流叉车设备', path: '/3D打印模型库/叉车new.stl', size: '3.5MB' },
  { name: '发动机.stl', displayName: '发动机', description: '汽车发动机总成模型', path: '/3D打印模型库/发动机.stl', size: '5.8MB' },
  { name: '变电箱.stl', displayName: '变电箱', description: '工业变电配电设备', path: '/3D打印模型库/变电箱.stl', size: '2.7MB' },
  { name: '后盖.stl', displayName: '后盖', description: '设备后盖组件', path: '/3D打印模型库/后盖.stl', size: '1.2MB' },
  { name: '小鹏.stl', displayName: '小鹏汽车', description: '小鹏汽车车身模型', path: '/3D打印模型库/小鹏.stl', size: '8.9MB' },
  { name: '底盘.stl', displayName: '底盘', description: '汽车底盘结构模型', path: '/3D打印模型库/底盘.stl', size: '6.3MB' },
  { name: '底盘new.stl', displayName: '底盘(新版)', description: '升级版汽车底盘结构模型', path: '/3D打印模型库/底盘new.stl', size: '6.8MB' },
  { name: '底盘结构.stl', displayName: '底盘结构', description: '详细底盘结构组件', path: '/3D打印模型库/底盘结构.stl', size: '4.9MB' },
  { name: '座椅.stl', displayName: '座椅', description: '汽车座椅模型', path: '/3D打印模型库/座椅.stl', size: '2.8MB' },
  { name: '无人机.stl', displayName: '无人机', description: '工业巡检无人机', path: '/3D打印模型库/无人机.stl', size: '3.4MB' },
  { name: '无人机2.stl', displayName: '无人机2', description: '多旋翼无人机模型', path: '/3D打印模型库/无人机2.stl', size: '3.7MB' },
  { name: '无人机4.stl', displayName: '无人机4', description: '大型工业无人机', path: '/3D打印模型库/无人机4.stl', size: '4.1MB' },
  { name: '机器人.stl', displayName: '机器人', description: '工业服务机器人', path: '/3D打印模型库/机器人.stl', size: '5.2MB' },
  { name: '机械臂.stl', displayName: '机械臂', description: '六轴工业机械臂', path: '/3D打印模型库/机械臂.stl', size: '4.6MB' },
  { name: '机械臂2.stl', displayName: '机械臂2', description: '协作机械臂模型', path: '/3D打印模型库/机械臂2.stl', size: '4.8MB' },
  { name: '机械臂3.stl', displayName: '机械臂3', description: '精密装配机械臂', path: '/3D打印模型库/机械臂3.stl', size: '5.1MB' },
  { name: '机械臂4.stl', displayName: '机械臂4', description: '重载工业机械臂', path: '/3D打印模型库/机械臂4.stl', size: '5.5MB' },
  { name: '电池.stl', displayName: '电池', description: '动力电池组模型', path: '/3D打印模型库/电池.stl', size: '3.2MB' },
  { name: '货架.stl', displayName: '货架', description: '智能仓储货架系统', path: '/3D打印模型库/货架.stl', size: '2.9MB' },
  { name: '车身.stl', displayName: '车身', description: '汽车车身外壳模型', path: '/3D打印模型库/车身.stl', size: '7.8MB' },
  { name: '车轮.stl', displayName: '车轮', description: '汽车轮毂轮胎总成', path: '/3D打印模型库/车轮.stl', size: '2.1MB' },
  { name: '巡检车.stl', displayName: '巡检车', description: '智能巡检车辆', path: '/3D打印模型库/巡检车.stl', size: '4.3MB' },
  { name: '巡检车big.stl', displayName: '巡检车(大型)', description: '大型智能巡检车辆', path: '/3D打印模型库/巡检车big.stl', size: '5.7MB' },
  { name: '巡检车big2.stl', displayName: '巡检车(大型2)', description: '大型智能巡检车辆第二版', path: '/3D打印模型库/巡检车big2.stl', size: '6.1MB' },
  { name: '零件.stl', displayName: '零件', description: '通用工业零件模型', path: '/3D打印模型库/零件.stl', size: '1.5MB' }
])

// 初始化港口模型
const initializePortModels = () => {
  portModels.value = generatePortModels()
  // 更新分类中的模型数量
  const portCategory = modelCategories.value.find(cat => cat.id === 3)
  if (portCategory) {
    portCategory.count = portModels.value.length
  }
}

// 初始化
initializePortModels()

// 方法
const selectCategory = (category) => {
  selectedCategory.value = category
  selectedModel.value = null
  if (category.id === 1) {
    // 默认选择机械模型类型和第一个模型
    selectedFactoryModelType.value = '机械模型'
    if (currentFactoryModels.value && currentFactoryModels.value.length > 0) {
      selectedModel.value = currentFactoryModels.value[0]
    }
  } else if (category.id === 2) {
    // 默认选择第一个智能城市模型
    selectedCityModelType.value = '交通信号灯'
    if (currentCityModels.value && currentCityModels.value.length > 0) {
      selectedModel.value = currentCityModels.value[0]
    }
  } else if (category.id === 3) {
    // 默认选择第一个港口模型
    selectedModel.value = portModels.value[0]
  } else if (category.id === 4) {
    // 默认选择第一个家居模型
    if (homeModels.value && homeModels.value.length > 0) {
      selectedModel.value = homeModels.value[0]
    }
  } else if (category.id === 5) {
    // 默认选择第一个AI生成模型
    selectedModel.value = aiGeneratedModels.value[0]
  } else if (category.id === 6) {
    // 默认选择第一个3D打印模型
    selectedModel.value = printingModels.value[0]
  }
}

const handleModelTypeChange = (newType) => {
  selectedCityModelType.value = newType
  // 选择新类型的第一个模型
  if (currentCityModels.value && currentCityModels.value.length > 0) {
    selectedModel.value = currentCityModels.value[0]
  } else {
    selectedModel.value = null
  }
}

// 工厂模型类型切换处理
const handleFactoryModelTypeChange = (newType) => {
  selectedFactoryModelType.value = newType
  // 选择新类型的第一个模型
  if (currentFactoryModels.value && currentFactoryModels.value.length > 0) {
    selectedModel.value = currentFactoryModels.value[0]
  } else {
    selectedModel.value = null
  }
}

const selectModel = (model) => {
  selectedModel.value = model
}

const goBackToCategories = () => {
  selectedCategory.value = null
  selectedModel.value = null
}
</script>

<style scoped>
.model-library-page {
  padding: 24px;
  background: #f5f5f5;
  min-height: 100vh;
}

.page-header {
  margin-bottom: 24px;
}

.page-header h2 {
  margin: 0 0 8px 0;
  color: #1d2129;
  font-size: 24px;
  font-weight: 600;
}

.page-header p {
  margin: 0;
  color: #86909c;
  font-size: 14px;
}

.content-container {
  background: white;
  border-radius: 8px;
  padding: 24px;
}



.model-categories {
  margin-bottom: 32px;
}

.model-categories h2 {
  margin-bottom: 16px;
  font-size: 18px;
  font-weight: 600;
  color: #1d2129;
}

.categories-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(400px, 1fr));
  gap: 24px;
}

.category-card {
  background: #f5f5f5;
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  transition: all 0.3s ease;
}

.category-card:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.category-image {
  position: relative;
  height: 50vh;
  min-height: 300px;
  max-height: 500px;
}

.category-image img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background-color: #f0f0f0;
}

.category-overlay {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background: rgba(0, 0, 0, 0.5);
  color: white;
  padding: 8px 12px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.category-count {
  font-size: 14px;
  font-weight: 600;
}

.category-content {
  padding: 16px;
}

.category-content h3 {
  margin-bottom: 8px;
  font-size: 16px;
  font-weight: 600;
  color: #1d2129;
}

.category-content p {
  margin-bottom: 12px;
  font-size: 14px;
  color: #4e5969;
  line-height: 1.4;
}

.category-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.tag {
  background: #e6f7ff;
  color: #1890ff;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
}

/* 头部操作按钮 */
.header-actions {
  margin-top: 16px;
}

/* 模型列表样式 */
.model-list {
  width: 100%;
}

.model-list-header {
  margin-bottom: 24px;
}

.model-list-header h2 {
  margin: 0 0 8px 0;
  color: #1d2129;
  font-size: 20px;
  font-weight: 600;
}

.model-list-header p {
  margin: 0;
  color: #86909c;
  font-size: 14px;
}

.model-type-selector {
  margin-top: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.model-type-selector label {
  font-size: 14px;
  font-weight: 500;
  color: #1d2129;
}

.model-content {
  display: grid;
  grid-template-columns: 400px 1fr;
  gap: 24px;
  height: 70vh;
}

.model-grid {
  background: #f8f9fa;
  border-radius: 8px;
  padding: 16px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.model-item {
  background: white;
  border-radius: 6px;
  padding: 12px;
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  transition: all 0.2s ease;
  border: 2px solid transparent;
}

.model-item:hover {
  background: #f0f8ff;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.model-item.active {
  border-color: #1890ff;
  background: #e6f7ff;
  box-shadow: 0 2px 8px rgba(24, 144, 255, 0.2);
}

.model-icon {
  width: 40px;
  height: 40px;
  background: #1890ff;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 18px;
  flex-shrink: 0;
}

.model-info {
  flex: 1;
  min-width: 0;
}

.model-info h4 {
  margin: 0 0 4px 0;
  font-size: 14px;
  font-weight: 600;
  color: #1d2129;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.model-info p {
  margin: 0 0 6px 0;
  font-size: 12px;
  color: #4e5969;
  line-height: 1.3;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.model-meta {
  display: flex;
  gap: 8px;
  font-size: 11px;
}

.model-type {
  background: #f2f3f5;
  color: #4e5969;
  padding: 2px 6px;
  border-radius: 3px;
}

.model-size {
  background: #e6f7ff;
  color: #1890ff;
  padding: 2px 6px;
  border-radius: 3px;
}

.model-viewer {
  background: white;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #e5e6eb;
}

/* 分类占位符样式 */
.category-placeholder {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 60vh;
}

.placeholder-content {
  text-align: center;
  color: #86909c;
}

.placeholder-content .arco-icon {
  font-size: 48px;
  margin-bottom: 16px;
}

.placeholder-content h3 {
  margin: 16px 0 8px 0;
  color: #1d2129;
  font-size: 18px;
  font-weight: 600;
}

.placeholder-content p {
  margin: 0 0 24px 0;
  font-size: 14px;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .model-content {
    grid-template-columns: 350px 1fr;
  }
}

@media (max-width: 768px) {
  .categories-grid {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  
  .category-image {
    height: 40vh;
    min-height: 220px;
    max-height: 300px;
  }

  .model-content {
    grid-template-columns: 1fr;
    height: auto;
    gap: 16px;
  }

  .model-grid {
    height: 300px;
  }

  .model-viewer {
    height: 400px;
  }
}
</style>
